import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Row, Table, Button, Divider, Popconfirm, Col } from 'antd';
import AddModbusForm from './components/add';
import EditModbusForm from './components/edit';

@connect(({ devices, loading }) => ({
  devices,
  loading: loading.models.devices,
}))
class ModbusProtocol extends PureComponent {
  state = {
    modalVisible: false,
    editModalVisible: false,
  };

  columns = [
    {
      key: 'name',
      title: formatMessage({ id: 'app.dm.devices.modbus.table.name' }),
      dataIndex: 'name',
    },
    {
      key: 'propertyLabel',
      title: formatMessage({ id: 'app.dm.devices.modbus.table.propertyLabel' }),
      dataIndex: 'propertyLabel',
    },
    {
      key: 'dataTypeName',
      title: formatMessage({ id: 'app.dm.devices.modbus.table.dataType' }),
      dataIndex: 'dataTypeName',
    },
    {
      key: 'registerTypeName',
      title: formatMessage({ id: 'app.dm.devices.modbus.table.registerType' }),
      dataIndex: 'registerTypeName',
    },
    {
      key: 'startAddress',
      title: formatMessage({ id: 'app.dm.devices.modbus.table.startAddress' }),
      dataIndex: 'startAddress',
    },
    {
      key: 'registerCounts',
      title: formatMessage({ id: 'app.dm.devices.modbus.table.registerCounts' }),
      dataIndex: 'registerCounts',
    },
    {
      key: 'action',
      title: formatMessage({ id: 'app.dm.devices.modbus.table.action' }),
      render: record => (
        <Fragment>
          <a onClick={() => this.editView(record.id)}>
            <FormattedMessage id="app.dm.devices.modbus.table.action.edit" />
          </a>
          <Divider type="vertical" />
          <Popconfirm
            title={
              <div style={{ width: 280 }}>
                <div style={{ fontWeight: 'bold', color: '000', marginBottom: 10 }}>
                  <span>
                    {formatMessage(
                      { id: 'app.dm.devices.modbus.del.confirm' },
                      { name: record.name },
                    )}
                  </span>
                </div>
              </div>
            }
            onConfirm={() => this.handleDelete(record.id)}
          >
            <a>
              <FormattedMessage id="app.dm.devices.modbus.table.action.del" />
            </a>
          </Popconfirm>
        </Fragment>
      ),
    },
  ];

  componentDidMount() {
    const { dispatch, modbusProtocolId, deviceId } = this.props;
    dispatch({
      type: 'devices/fetchModbusProtocol',
      payload: modbusProtocolId,
    });
    dispatch({
      type: 'devices/fetchDeviceProps',
      payload: deviceId,
    });
    dispatch({
      type: 'devices/fetchDataType',
    });
    dispatch({
      type: 'devices/fetchRegisterType',
    });
  }

  editView = id => {
    const { dispatch } = this.props;
    const { handleEditModalVisible } = this;
    dispatch({
      type: 'devices/fetchModbusDetail',
      payload: id,
      handleEditModalVisible,
    });
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  handleEditModalVisible = flag => {
    this.setState({
      editModalVisible: !!flag,
    });
  };

  handleDelete = id => {
    const { dispatch, modbusProtocolId } = this.props;
    dispatch({
      type: 'devices/delModbusProtocol',
      payload: id,
      modbusProtocolId,
    });
  };

  handleAdd = (fields, form) => {
    const { dispatch, modbusProtocolId } = this.props;
    const { handleModalVisible } = this;
    const params = {
      propertyLabel: fields.propertyLabel,
      dataTypeId: fields.dataType.key,
      dataTypeName: fields.dataType.label,
      registerTypeId: fields.registerType.key,
      registerTypeName: fields.registerType.label,
      startAddress: fields.startAddress,
      registerCounts: fields.registerCounts,
    };
    dispatch({
      type: 'devices/addModbusProtocol',
      payload: {
        name: fields.name,
        protocolId: modbusProtocolId,
        type: 3,
        content: JSON.stringify(params),
      },
      form,
      handleModalVisible,
    });
  };

  handleEdit = (fields, form) => {
    const { dispatch } = this.props;
    const { handleEditModalVisible } = this;
    const params = {
      propertyLabel: fields.propertyLabel,
      dataTypeId: fields.dataType.key,
      dataTypeName: fields.dataType.label,
      registerTypeId: fields.registerType.key,
      registerTypeName: fields.registerType.label,
      startAddress: fields.startAddress,
      registerCounts: fields.registerCounts,
    };
    dispatch({
      type: 'devices/editModbusProtocol',
      payload: {
        id: fields.id,
        protocolId: fields.protocolId,
        name: fields.name,
        content: JSON.stringify(params),
      },
      form,
      handleEditModalVisible,
    });
  };

  render() {
    const {
      devices: { modbusProtocolList, registerTypes, props, dataTypes, modbusDetail },
      loading,
    } = this.props;
    const { modalVisible, editModalVisible } = this.state;

    const parentMethods = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible,
      registerTypes,
      dataTypes,
      props,
    };

    const editModalProps = {
      handleEdit: this.handleEdit,
      handleEditModalVisible: this.handleEditModalVisible,
      registerTypes,
      dataTypes,
      props,
      detail: modbusDetail,
    };

    return (
      <Fragment>
        <Row>
          <Col style={{ textAlign: 'right' }}>
            <Button type="primary" onClick={() => this.handleModalVisible(true)}>
              <FormattedMessage id="app.dm.devices.modbus.add" />
            </Button>
          </Col>
        </Row>
        <Row>
          <Table
            columns={this.columns}
            dataSource={modbusProtocolList}
            loading={loading}
            rowKey="id"
            pagination={false}
            style={{ marginTop: 15 }}
          />
        </Row>
        <AddModbusForm {...parentMethods} modalVisible={modalVisible} />
        <EditModbusForm {...editModalProps} modalVisible={editModalVisible} />
      </Fragment>
    );
  }
}
export default ModbusProtocol;
